import React, { Component } from 'react';
import styles from './index.less';
import normal from '@/assets/normal.svg';
import Border from '@/components/border/index.jsx';
import RcBarChart from '@/components/common/barChart/index.jsx';
class BuildPower extends Component {
  constructor(props) {
    super(props);
    this.state = {
      left: [],
      xData: [],
      yData: [],
      all_data: {},
      activeIndex: '',
      isSuccess: false,
    };
  }
  componentDidMount() {
    this.handleFull();
  }
  componentWillReceiveProps(nextProps) {
    let _title = [];
    if (nextProps.data.length > 0) {
      nextProps.data.forEach((item, index) => {
        _title.push(item.building);
      });
      this.setState(
        {
          left: _title,
          all_data: nextProps.data,
          legendName: [nextProps.data[0].title.power_total],
          legendShow: true,
          isSuccess: true,
        },
        () => {
          this.changeTab(nextProps.data[0].building, 0);
        },
      );
    }
  }
  // 全屏
  handleFull() {
    document.getElementById('barA').addEventListener('mousedown', function () {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    });
    document.getElementById('barAA').addEventListener('mousedown', function () {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    });
  }
  changeTab(item, index) {
    let _x = [],
      _y = [],
      y = [];
    this.setState(
      {
        activeIndex: item,
      },
      () => {
        this.state.all_data.forEach((item, index) => {
          if (item.building === this.state.activeIndex) {
            item.content.forEach((ite, ind) => {
              _x.push(ite.x);
              _y.push(ite.power_total);
            });
          }
        });
        // y.push(_y);
        this.setState({
          xData: _x,
          yData: _y,
        });
      },
    );
  }

  render() {
    const { left, xData, yData, legendName, legendShow, color } = this.state;
    return (
      <div className={styles.buildPower}>
        <div className={styles.title} id="barA">
          <img src={normal} alt="" />
          房间用电情况
        </div>

        <div className={styles.barChart}>
          <div className={styles.left}>
            <Border
              text={left || []}
              disTabs={this.changeTab.bind(this)}
              isSuccess={this.state.isSuccess}
            />
          </div>
          <div className={styles.right} id="barAA">
            <RcBarChart id={'qwqwqwqwqw'} xData={yData} yData={xData} />
            <span className="label">kWh</span>
          </div>
        </div>
      </div>
    );
  }
}
export default BuildPower;
